/*
 *  商品渲染
 * 
 */
"use strict";   //严格模式

var commodity = $.ajax({
  type: "GET",
  url: "./json/commodity.json",
  dataType: "json",
  async: true,
  success: function (data) {

    /*有好货*/
    var $goodsList = $("#goodsList");
    var goodsListBox = '';

    for (var i of data.haveGoodGoods) {
      goodsListBox +=
        '<a href="' + i.url + '">' +
        '<div class="img-wrapper">' +
        '<img src="' + i.img + '">' +
        '</div>' +
        '<div class="info">' +
        '<h4>' + i.title + '</h4>' +
        '<p>' + i.subtitle + '</p>' +
        '<p class="extra">' +
        '<svg class="icon iconxiaolian"><use xlink:href="#iconxiaolian"></use></svg>' +
        '<em>' + i.people + ' 人说好</em>' +
        '</p>' +
        '</div>' +
        '</a>';
    }

    $goodsList.append(goodsListBox);

    /*爱逛街*/
    var $shoppingList = $("#shoppingList");
    var shoppingListBox = '';

    for (var i of data.loveShopping) {
      shoppingListBox +=
        '<a href="' + i.url + '">' +
        '<div class="img-wrapper">' +
        '<img src="' + i.img + '" alt="' + i.title + '">' +
        '</div>' +
        '<div class="info">' +
        '<p class="subtitle">' +
        '<svg class="icon iconshuangyinhao"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconshuangyinhao"></use></svg>' +
        i.title +
        '</p>' +
        '<div class="extra">' +
        '<div class="pic-wrapper"><img src="' + i.avatar + '" alt="' + i.name + '"></div>' +
        '<p class="extra-name">' + i.name + '</p>' +
        '</div>' +
        '</div>' +
        '</a>';
    }

    $shoppingList.append(shoppingListBox);

    /*淘抢购*/
    var $amoyBuying_ul = $("#amoyBuying_ul");
    var amoyBuyingBox = '';

    /* 淘抢购倒计时（刷新时不影响倒计时）  */
    var $hour = $('.countdown-wrapper #hour');
    var $minutes = $('.countdown-wrapper #minutes');
    var $seconds = $('.countdown-wrapper #seconds');
    var $amoyBuying_changeOne = $('#amoyBuying_changeOne');

    var maxtime = 5400; //设定时间，秒数（1小时半/5400）
    var cacheTime; //缓存
    var amoyBuyingTimer = null;

    //赋值给浏览器缓存
    if (window.name == '' || window.name == '-1' || isNaN(window.name)) {
      cacheTime = maxtime;
    } else {
      cacheTime = window.name;
    }

    //倒计时
    var coucntdown = function () {

      if (cacheTime >= 0) {

        var h = Math.floor((cacheTime / 3600) % 60);  //时（总秒数除3600得到小时，在除魔60）
        var m = Math.floor((cacheTime / 60) % 60);  //分（总秒数除60得到分钟，在除魔60）
        var s = Math.floor(cacheTime % 60);  //秒（余数就是秒数）

        //统一利用两位数(单位数补0)
        h = h < 10 ? '0' + h : h;
        m = m < 10 ? '0' + m : m;
        s = s < 10 ? '0' + s : s;

        $hour.html(h);
        $minutes.html(m);
        $seconds.html(s);

        //自减
        cacheTime--
        //自减完赋值给缓存
        window.name = cacheTime;

      } else {

        //倒计时结束开始新的
        clearInterval(amoyBuyingTimer);
        $("#countdown").html('活动已结束');
        $amoyBuying_changeOne.unbind();

      }

    }
    //执行倒计时
    amoyBuyingTimer = setInterval(coucntdown, 1000);

    /*换一换*/
    var changeOneIndex = 0; //计数

    $amoyBuying_changeOne.click(function () {

      $amoyBuying_ul.html('');
      amoyBuyingBox = '';

      //随机3个宝贝
      Array.prototype.random = function () {
        var idx = Math.floor((Math.random() * this.length));
        var n = this.splice(idx, 1)[0];
        return n;
      }

      var randomI = 0;
      var randomLi = [];

      while (randomI++ < 3) {
        randomLi.push(data.amoyBuying.random())
      }

      //渲染
      for (var i of randomLi) {
        //销量量百分比
        var percentage = Math.floor(i.salesVolume / 14);
        if (percentage < 0) {
          percentage = 0;
        } else if (percentage <= 1) {
          percentage = 1;
        } else if (percentage > 1000) {
          percentage = 100;
        }

        amoyBuyingBox +=
          '<li>' +
          '<a href="' + i.url + '">' +
          '<div class="img-wrapper"><img src="' + i.img + '"></div>' +
          '<div class="info">' +
          '<h4>' + i.title + '</h4>' +
          '<p>' + i.subtitle + '</p>' +
          '<div class="progress">' +
          '<div class="progress-bar" style="width: ' + percentage + '%"></div>' +
          '</div>' +
          '<div class="desc">' +
          '<span class="percentage">' + percentage + '%</span>' +
          '<span class="letter">已抢' + i.salesVolume + '件</span>' +
          '</div>' +
          '<div class="extra">' +
          '<span class="yan">￥</span>' +
          '<span class="cur">' + i.cur + '</span>' +
          '<span class="price">' + i.price + '</span>' +
          '</div>' +
          '</div>' +
          '</a>' +
          '</li>';
      }

      $amoyBuying_ul.append(amoyBuyingBox);

      //判断换4次之后停止
      changeOneIndex++;
      if (changeOneIndex == 4) {
        $amoyBuying_changeOne.unbind();
        $amoyBuying_changeOne.css('cursor', 'context-menu');
      }

    });

    /*渲染头3个*/
    $amoyBuying_changeOne.click()

    /*每日好店*/
    var $tbhShop_Ul = $("#tbhShop_Ul");
    var tbhShopLi = '';

    for (var i of data.tbhShop) {
      tbhShopLi +=
        '<li>' +
        '<a href="' + i.url + '">' +
        '<h4>' +
        '<span class="title">' + i.ShopName + '</span>' +
        '<span class="subtitle">一个月被关注了' + i.attention + '次，一定有好东西！</span>' +
        '</h4>' +
        '<div class="main-wrapper">' +
        '<div class="img-wrapper"><img src="' + i.bigImg + '" alt="商品大图"></div>' +
        '<div class="right-wrapper">' +
        '<div class="img-wrapper top"><img src="' + i.smallImg1 + '" alt="商品小图"></div>' +
        '<div class="img-wrapper"><img src="' + i.smallImg2 + '" alt="商品小图"></div>' +
        '</div>' +
        '</div>' +
        '</a>' +
        '</li>';
    }

    $tbhShop_Ul.append(tbhShopLi);

    /*淘宝直播*/
    var $tbhLive_Ul = $("#tbhLive_Ul");
    var tbhLiveLi = '';

    for (var i of data.tbhLive) {
      tbhLiveLi +=
        '<li>' +
        '<a href="' + i.url + '">' +
        '<h4>' +
        '<span class="title">' + i.title + '</span>' +
        '<span class="subtitle">' + i.numberOfPeople + '观看</span>' +
        '</h4>' +
        '<div class="main-wrapper">' +
        '<div class="img-wrapper">' +
        '<img src="' + i.bigImg + '" alt="商品大图">' +
        '<div class="title">' +
        '<svg class="icon iconiclive"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconiclive"></use></svg>' +
        '<span>' + i.title + '</span>' +
        '</div>' +
        '</div>' +
        '<div class="right-wrapper">' +
        '<div class="img-wrapper top"><img src="' + i.smallImg1 + '" alt="商品小图"></div>' +
        '<div class="img-wrapper"><img src="' + i.smallImg2 + '" alt="商品小图"></div>' +
        '</div>' +
        '</div>' +
        '</a>' +
        '</li>';
    }

    $tbhLive_Ul.append(tbhLiveLi);

    /*时尚爆料王*/
    var $fashion_list = $("#fashion_list");
    var fashionLi = '';

    for (var i of data.fashion) {
      fashionLi +=
        '<div class="fashion_item br_style">' +
        '<div class="info">' +
        '<a href="' + i.url + '" class="title">' + i.title + '</a>' +
        '<P>' + i.subtitle + '</P>' +
        '</div>' +
        '<div class="img-wrapper-outer">' +
        '<a href="' + i.img1Url + '" class="l"><img src="' + i.img1 + '" alt="' + i.title + '"></a>' +
        '<a href="' + i.img2Url + '" class="r"><img src="' + i.img2 + '" alt="' + i.title + '"></a>' +
        '</div>' +
        '</div>';
    }

    $fashion_list.append(fashionLi);

    /*广告图*/
    var $tbTanxWrapper = $("#tbTanxWrapper");

    $tbTanxWrapper.append(
      '<a href="' + data.fashionRight.url + '">' +
      '<img src="' + data.fashionRight.img + '" title="广告图" alt="广告图">' +
      '</a>'
    );

    /*品质生活家*/
    var $quality_L = $("#quality_L");
    var $quality_R = $("#quality_R");

    /*海报*/
    var qualityPoster = data.quality.qualityPoster;
    var maxImg = "";
    maxImg =
      '<div class="max-img br_style">' +
      '<a href="' + qualityPoster.url + '">' +
      '<img src="' + qualityPoster.img + '" alt="' + qualityPoster.title + '">' +
      '</a>' +
      '</div>';
    $quality_L.html(maxImg);

    /*left*/
    var quality_L = data.quality.quality_L;
    var quality_L_item = "";
    for (var i of quality_L) {
      quality_L_item +=
        '<a href="' + i.url + '" class="item br_style">' +
        '<div class="item-bd">' +
        '<h4 class="title">' + i.title + '</h4>' +
        '<p class="title">' + i.subheading + '</p>' +
        '</div>' +
        '<div class="item-hd">' +
        '<img src="' + i.img + '" alt="' + i.title + '">' +
        '</div>' +
        '</a>';
    }
    $quality_L.append(quality_L_item);

    /*right*/
    var quality_R = data.quality.quality_R;
    var quality_R_item = "";
    for (var i of quality_R) {
      quality_R_item +=
        '<div class="item br_style">' +
        '<p class="item-hd">' +
        '<a class="title" href="' + i.url + '">' + i.title + '</a>' +
        '<span class="subtitle">' + i.subheading + '</span>' +
        '</p>' +
        '<div class="item-bd">' +
        '<a href="' + i.img1URL + '" class="l">' +
        '<img src="' + i.img1 + '" alt="' + i.title + '">' +
        '</a>' +
        '<a href="' + i.img2URL + '" class="l">' +
        '<img src="' + i.img2 + '" alt="' + i.title + '">' +
        '</a>' +
        '</div>' +
        '</div>';
    }
    $quality_R.append(quality_R_item);

    /*特色玩味控*/
    var $featured_L = $("#featured_L");
    var $featured_R = $("#featured_R");

    /*海报*/
    var featuredPoster = data.featured.featuredPoster;
    var maxImg = "";
    maxImg =
      '<div class="max-img br_style">' +
      '<a href="' + featuredPoster.url + '">' +
      '<img src="' + featuredPoster.img + '" alt="' + featuredPoster.title + '">' +
      '</a>' +
      '</div>';
    $featured_L.html(maxImg);

    /*left*/
    var featured_L = data.featured.featured_L;
    var featured_L_item = "";
    for (var i of featured_L) {
      featured_L_item +=
        '<a href="' + i.url + '" class="item br_style">' +
        '<div class="item-bd">' +
        '<h4 class="title">' + i.title + '</h4>' +
        '<p class="title">' + i.subheading + '</p>' +
        '</div>' +
        '<div class="item-hd">' +
        '<img src="' + i.img + '" alt="' + i.title + '">' +
        '</div>' +
        '</a>';
    }
    $featured_L.append(featured_L_item);

    /*right*/
    var featured_R = data.featured.featured_R;
    var featured_R_item = "";
    for (var i of featured_R) {
      featured_R_item +=
        '<div class="item br_style">' +
        '<p class="item-hd">' +
        '<a class="title" href="' + i.url + '">' + i.title + '</a>' +
        '<span class="subtitle">' + i.subheading + '</span>' +
        '</p>' +
        '<div class="item-bd">' +
        '<a href="' + i.img1URL + '" class="l">' +
        '<img src="' + i.img1 + '" alt="' + i.title + '">' +
        '</a>' +
        '<a href="' + i.img2URL + '" class="l">' +
        '<img src="' + i.img2 + '" alt="' + i.title + '">' +
        '</a>' +
        '</div>' +
        '</div>';
    }
    $featured_R.append(featured_R_item);

    /*实惠专业户*/
    var $affordList = $("#affordList");
    var affordItem = "";
    for (var i of data.afford) {
      affordItem +=
        '<div class="item br_style">' +
        '<a href="' + i.url + '" class="item-hd">' + i.title + '</a>' +
        '<div class="item-bd">' +
        '<a href="' + i.url + '" class="f1"><img src="' + i.img + '" alt="' + i.title + '"></a>' +
        '<div class="info">' +
        '<P class="title">' + i.subheading + '</P>' +
        '<P class="subtitle">' + i.text + '</P>' +
        '<a href="' + i.url + '" class="btn">' + i.btnText + '</a>' +
        '</div>' +
        '</div>' +
        '</div>';
    }
    $affordList.append(affordItem);

    /*热卖单品*/
    /*labe*/
    var $hotSaleLabel = $("#hotSaleLabel");
    var hotSaleLabelBox = "";
    for (var i of data.hotSaleLabel) {
      hotSaleLabelBox += '<a href="' + i.url + '" title="' + i.title + '">' + i.title + '</a>';
    }
    $hotSaleLabel.append(hotSaleLabelBox);

    /*宝贝*/
    var $hotSaleList = $("#hotSaleList");
    var hotSaleBOX = "";
    for (var i of data.hotSale) {
      if (i.label == "new") {
        hotSaleBOX +=
          '<li class="item br_style">' +
          '<a href="' + i.url + '">' +
          '<div class="item-img"><img src="' + i.img + '" title="' + i.title + '"></div>' +
          '<div class="item-title"><img title="包邮" class="postfree" src="https://img.alicdn.com/tfs/TB1APkObOIRMeJjy0FbXXbnqXXa-56-32.png">' + i.title + '</div>' +
          '<div class="line-1">' +
          '<span class="evaluate">评价 <em>' + i.evaluate + '</em></span>' +
          '<span class="collection">收藏 <em>' + i.collection + '</em></span>' +
          '</div>' +
          '<div class="line-2">' +
          '<div class="l">' +
          '<span class="price">￥<em>' + i.price + '</em></span>' +
          '<span class="original-price">¥' + i.originalPrice + '</span>' +
          '</div>' +
          '<div class="sales r">月销' + i.sales + '笔</div>' +
          '</div>' +
          '</a>' +
          '</li>';
      } else if (i.label == "hot") {
        hotSaleBOX +=
          '<li class="item br_style">' +
          '<a href="' + i.url + '">' +
          '<div class="item-img"><img src="' + i.img + '" title="' + i.title + '"></div>' +
          '<div class="item-title"><img title="爆款" class="postfree" src="https://img.alicdn.com/tps/i3/TB1xWZUKVXXXXXbXXXXdpC3GXXX-33-15.png">' + i.title + '</div>' +
          '<div class="line-1">' +
          '<span class="evaluate">评价 <em>' + i.evaluate + '</em></span>' +
          '<span class="collection">收藏 <em>' + i.collection + '</em></span>' +
          '</div>' +
          '<div class="line-2">' +
          '<div class="l">' +
          '<span class="price">￥<em>' + i.price + '</em></span>' +
          '<span class="original-price">¥' + i.originalPrice + '</span>' +
          '</div>' +
          '<div class="sales r">月销' + i.sales + '笔</div>' +
          '</div>' +
          '</a>' +
          '</li>';
      } else {
        hotSaleBOX +=
          '<li class="item br_style">' +
          '<a href="' + i.url + '">' +
          '<div class="item-img"><img src="' + i.img + '" title="' + i.title + '"></div>' +
          '<div class="item-title">' + i.title + '</div>' +
          '<div class="line-1">' +
          '<span class="evaluate">评价 <em>' + i.evaluate + '</em></span>' +
          '<span class="collection">收藏 <em>' + i.collection + '</em></span>' +
          '</div>' +
          '<div class="line-2">' +
          '<div class="l">' +
          '<span class="price">￥<em>' + i.price + '</em></span>' +
          '<span class="original-price">¥' + i.originalPrice + '</span>' +
          '</div>' +
          '<div class="sales r">月销' + i.sales + '笔</div>' +
          '</div>' +
          '</a>' +
          '</li>';
      }
    }
    $hotSaleList.append(hotSaleBOX);

    /*banner*/
    var $hotSaleBanner = $("#hotSaleBanner");
    var hotSaleBanner = "";
    for (var i of data.hotSaleBanner) {
      hotSaleBanner += '<a href="' + i.url + '" class="item br_style"><img src="' + i.img + '" width="100%"></a>';
    }
    $hotSaleBanner.append(hotSaleBanner);

    /*猜你喜欢（实现懒加载）*/
    var $guessLikeList = $("#guessLikeList");

    //初始化
    var counter = 0; //存次数
    var offset = 0; //存渲染数量
    var size = 15; //一次渲染多少个
    var isEnd = false; //结束标志

    //首次加载
    getData(offset, size);

    //滚动监听
    $(window).scroll(function () {

      //到底停止
      if (isEnd == true) { return }

      //当滚动到底部时加载（页面高度-滚动条-浏览器图示窗口）
      if ($(document).height() - $(this).scrollTop() - $(this).height() < 650) {
        counter++;
        offset = counter * size;
        getData(offset, size);
      }

    });

    //渲染函数
    function getData(offset, size) {

      //数据
      var datas = data.guessLikeList;
      var sum = data.guessLikeList.length;
      var guessLikeBox = "";

      //如果如果剩下的记录数不够分页，就让分页数取剩下的记录数
      //例如分页数是5，只剩2条，则只取2条，json取不到数据会报错
      if (sum - offset < size) {
        size = sum - offset
      }

      //循环数据里面的宝贝（offset + size）
      for (var i = offset; i < (offset + size); i++) {
        if (datas[i].label == "hot") {
          guessLikeBox +=
            '<li class="item br_style">' +
            '<a href="' + datas[i].url + '">' +
            '<div class="item-img"><img src="' + datas[i].img + '" title="' + datas[i].title + '"></div>' +
            '<div class="item-title">' + datas[i].title + '</div>' +
            '<div class="line-1">' +
            '<div class="price l"><img title="爆款" class="postfree" src="https://img.alicdn.com/tps/i3/TB1xWZUKVXXXXXbXXXXdpC3GXXX-33-15.png"><span>￥</span>' + datas[i].price + '</div>' +
            '<div class="sales r">销量：' + datas[i].sales + '</div>' +
            '</div>' +
            '<div class="item-more" title="发现更多相似的宝贝">' +
            '<p class="item-more-t"><svg class="icon iconaixin"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconaixin"></use></svg>找相似</p>' +
            '<p class="item-more-b">发现更多相似的宝贝<svg class="icon icongengduo1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icongengduo1"></use></svg></p>' +
            '</div>' +
            '</a>' +
            '</li>';
        } else {
          guessLikeBox +=
            '<li class="item br_style">' +
            '<a href="' + datas[i].url + '">' +
            '<div class="item-img"><img src="' + datas[i].img + '" title="' + datas[i].title + '"></div>' +
            '<div class="item-title">' + datas[i].title + '</div>' +
            '<div class="line-1">' +
            '<div class="price l"><span>￥</span>' + datas[i].price + '</div>' +
            '<div class="sales r">销量：' + datas[i].sales + '</div>' +
            '</div>' +
            '<div class="item-more" title="发现更多相似的宝贝">' +
            '<p class="item-more-t"><svg class="icon iconaixin"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#iconaixin"></use></svg>找相似</p>' +
            '<p class="item-more-b">发现更多相似的宝贝<svg class="icon icongengduo1"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icongengduo1"></use></svg></p>' +
            '</div>' +
            '</a>' +
            '</li>';
        }
      }
      $guessLikeList.append(guessLikeBox);

      //加载完了isEnd变true结束
      if ((offset + size) >= sum) {
        isEnd = true;
      }

    };

  }
});
